import React from "react";
import { Button, Drawer, Icon, Row, Spin, Empty, List } from 'antd';
import { connect } from 'dva';
import styles from '../../KnowledgeManagement/Overview/editQa/index.less';

const EditQa = React.lazy(() => import('../../KnowledgeManagement/Overview/editQa'));

@connect(({ customApi, loading }) => ({
  customApi,
  loading: loading.effects['customApi/apiUseConditions'],
}))
class ApiServiceCondition extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      qaUseApiData:null,
      dialogUseApiData:null,
      qaLoading:true,
      qaPage:1,
      editAnswerHidden:false,
      qaId:''
    };
  }
  componentDidUpdate(prevProps) {
    // 典型用法（不要忘记比较 props）：
    if (this.props.id !== prevProps.id) {
      this.fetchApiUseDetail(this.props.id)
    }
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };


  onClose = () => {
    this.setState({
      visible: false,
    },()=>{
      this.props.onClosed();
    });
  };

  getApiUseInfoByQa=(id)=> {
    const { dispatch } = this.props;
    const { qaPage } = this.state;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'customApi/getApiUseInfoByQa',
        payload: { id, limit: 10, page: qaPage },
        callback: (res) => {
          this.setState({
            qaUseApiData: res,
            qaLoading:false
          })
        }
      })
    })
  };

  getApiUseInfoByDialog=(id)=> {
    const { dispatch } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'customApi/getApiUseInfoByDialog',
        payload: { id, limit: 10000000, page: 1 },
        callback: (res) => {
          this.setState({
            qaUseApiData: res
          })
        }
      })
    })
  };

  fetchApiUseDetail = (id) =>{
    if(!id){
      return false
    }
    this.getApiUseInfoByDialog(id);
    this.getApiUseInfoByQa(id);
  };

  fenye=(e)=>{
    this.setState({
      qaPage:e
    },()=>{
      this.getApiUseInfoByQa(id)
    })
  };

  editAnswer=(id)=>{
    this.setState({
      qaId:id,
      editAnswerHidden:true
    })
  };

  onEditAnswerDrawerClose=()=>{
    this.setState({
      editAnswerHidden:false
    })
  };

  onCloseEditAnswerDrawer = () => {
    this.setState({
      editAnswerHidden: false,
      qaId: '',
    });
  };

  render() {
    const {visible,title} = this.props;
    const {qaUseApiData,qaLoading,dialogUseApiData} = this.state;
    return (
      <div>
        <Drawer
          closable={false}
          width="600"
          title={<div><Icon type="book" theme="twoTone" /><span style={{marginLeft:10}}>API使用情况</span></div>}
          placement="right"
          onClose={this.onClose}
          visible={visible}
        >
          <div style={{marginTop:10}}>
            <div className={styles.label}>正在使用API <Button style={{background:'orange',color:"#fff",marginLeft:10,marginRight:10}}>{title} </Button>的多轮会话</div>
            <div className={styles.labelWarp}>
              {
                dialogUseApiData >0?dialogUseApiData.list.map((item,index)=>{
                  return (
                    <Button htmlType='button' type="primary" shape="round" size='small' key='index'>
                      {item.std}
                    </Button>
                  )
                }):<Empty />
              }
            </div>
          </div>
          <div style={{marginTop:20}}>
            <div className={styles.label}>正在使用API <Button style={{background:'orange',color:"#fff",marginLeft:10,marginRight:10}}>{title} </Button>的知识点</div>
            <div className={styles.labelWarp}>
              {
                qaUseApiData ?
                  <List
                    size="small"
                    header=''
                    footer=''
                    dataSource={qaUseApiData.list}
                    loading={qaLoading}
                    pagination={{
                      onChange: page => {
                        this.fenye(page)
                      },
                      pageSize: 10,
                      total:parseInt(qaUseApiData.total),
                      showQuickJumper: true,
                    }}
                    renderItem={item => <List.Item onClick={()=>this.editAnswer(item.id)} style={{backgroundColor:"rgb(248,249,254)",color:"#222",borderRadius:30,padding:10,marginTop:10,cursor:"pointer"}}>{item.std}</List.Item>}
                  />
                  :<Empty />
              }
            </div>
          </div>
          <Drawer
            title={
              <span  onClick={this.onEditAnswerDrawerClose} style={{cursor:'pointer'}}>
                  <Icon type="arrow-left" style={{ marginRight: 20 }} />
                  返回
              </span>
            }
            placement="right"
            width={800}
            closable={false}
            destroyOnClose
            onClose={this.onEditAnswerDrawerClose}
            visible={this.state.editAnswerHidden}
          >
            <EditQa qaId={this.state.qaId} onClose={()=>this.onCloseEditAnswerDrawer()} />
          </Drawer>
        </Drawer>

      </div>
    );
  }
}

export default ApiServiceCondition;
